<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>云聚云散效果案例</title>
</head>

<body>
	<div class="btn-box">
		<button onclick="window.handleAnimateRevese()">云散</button>
		<button onclick="window.handleAnimatePlay()">云聚</button>
		<button onclick="window.handleAnimatePause()">暂停</button>
	</div>
	<div class="cloud-web-container"></div>
</body>

<script type="module">
	import { CloudWeb } from '../dist/CloudWeb.esm.js'

	const cloud = new CloudWeb({
		container: document.querySelector('.cloud-web-container'),
		renderer: 'svg',
		onComplete: (res) => {
			console.log('播放完成', res);
		},
		onSegmentStart: () => {
			console.log('111')
		}
	});


	window.handleAnimatePlay = function () {
		cloud.play(1)
	};

	window.handleAnimateRevese = function () {
		cloud.play(-1);
	}

	window.handleAnimatePause = function () {
		cloud.pause()
	}

</script>
<style>
	body,
	html {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	body {
		background-size: cover;
		background-repeat: no-repeat;
		background-color: black;
		/* background-image: url('https://ts1.cn.mm.bing.net/th/id/R-C.afead77e2afcb48512caeb6e14abb038?rik=CfgzDRHCmVDCUg&riu=http%3a%2f%2fpic.sc.chinaz.com%2ffiles%2fpic%2fflash2%2f201501%2fflash3364.jpg&ehk=Fg2P09wqXCLZkBliyncP1u9vTkarOS%2fio3DTfv68fH4%3d&risl=&pid=ImgRaw&r=0'); */
	}

	.cloud-web-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.btn-box {
		width: 400px;
		display: flex;
		position: absolute;
		top: 0;
		left: 0;
		justify-content: flex-start;
		align-items: center;
		z-index: 10;
	}

	.btn-box button {
		width: 100px;
		height: 50px;
	}
</style>

</html>